<template>
  <common-container v-loading="loading" element-loading-spinner="el-icon-loading" element-loading-text="拼命加载中…">
    <div slot="common-search">
      <div class="common-btn">
        <el-button type="primary" size="mini" @click="addUserItem">添加</el-button>
      </div>

    </div>
    <div slot="common-body">
      <el-table :data="tableData" :stripe="true" border size="mini">

        <el-table-column prop="username" width="180" label="登录帐号">
        </el-table-column>
        <el-table-column prop="name" width="250" label="姓名">
        </el-table-column>
        <el-table-column label="性别" width="150">
          <template slot-scope="scope">
            {{scope.row.sex==0?'男':'女'}}
          </template>
        </el-table-column>
        <el-table-column prop="phonenum" width="150" label="手机号码">
        </el-table-column>
        <el-table-column prop="auth" width="250" label="角色">
          <template slot-scope="scope">
            <span v-if='scope.row.auth==4'>主站操作员</span>
            <span v-else-if='scope.row.auth==6'>主站管理员</span>
            <span v-else-if='scope.row.auth==8'>代理操作员</span>
            <span v-else-if='scope.row.auth==10'>代理管理员</span>

          </template>

        </el-table-column>
        <el-table-column label="状态" width="150">
          <template slot-scope="scope">
            <span v-if='scope.row.state==0'>正常</span>
            <span v-else-if='scope.row.state==1'>禁用</span>

          </template>
        </el-table-column>
        <el-table-column label="操作" width="150">
          <template slot-scope="scope">
            <el-button @click="editHandleClick(scope.row)" type="text" size="small">编辑</el-button>
            <el-button type="text" size="mini" @click="deleteHandleClick(scope.row,scope.$index)">删除</el-button>
            <el-button type="text" size="mini" @click="resetPasswordClick(scope.row)">重置密码</el-button>
          </template>
        </el-table-column>
      </el-table>
      <add-diglog :title="title" :edit-data="user_dialog" :role-dialog="roleDialog" @addAndClick="addAndEditMenu" @cancelAndClick="cancelDialog"></add-diglog>
    </div>
    <div slot="common-page">
      <page-pagination v-on:pageFun="pageFunNumber" :page="page" :pageSize="pageSize" :total="total"></page-pagination>
    </div>
  </common-container>

</template>
<script>
import pagePagination from "@/components/Common/pagePagination";
import { mapGetters } from "vuex";
import server from "@/service/index";
import commonContainer from "@/components/Common/CommonContainer";
import addDiglog from "./add";
export default {
  props: ['breadcrumb'],
  data() {
    return {
      page: 1,
      pageSize: 10,
      total: 0,
      loading: true,
      roleDialog: false,
      isSearch: true,
      isAdd: true,
      title: '添加',
      tableData: [],
      user_dialog: {}
    }
  },
  created() {
    this.$store.dispatch('setNavName', this.breadcrumb);
  },
  mounted() {
    this.queryUserList();

  },
  methods: {

    addUserItem() {
      this.isAdd = true;
      this.roleDialog = true;
      this.isSearch = false;
      this.title = '添加';
      this.user_dialog = {
        id: "",
        name: '',
        username: '',
        phonenum: '',
        password: '000000',
        sex: '0',
        state: '1'
      };
    },
    addAndEditMenu(params, formName) {

      if (this.isAdd) {
        this.addHandleClick(params, formName);
      } else {
        params.id = this.user_dialog.user_id;
        this.editUserItemSubmit(params, formName);
      }
    },
    cancelDialog({ bool, isSearch }) {
      this.roleDialog = bool;
      this.isSearch = isSearch;
    },
    //修改
    async editUserItemSubmit(params) {
      let res = await server.haiheiUpdateUserServer(params);
      if (res.success) {
        this.$message({
          type: "success",
          message: res.msg
        });
        // this.$refs[formName].resetFields();
        this.roleDialog = false;
        this.queryUserList();
      } else {
        this.$message({
          type: "error",
          message: res.msg
        });
      }
    },

    // 添加
    async addHandleClick(params, formName) {
      let res = await server.haiheiAddUserServer(params);
      if (res.success) {
        this.$message({
          type: "success",
          message: res.msg
        });

        this.roleDialog = false;
        this.queryUserList();
      } else {
        this.$message({
          type: "error",
          message: res.msg
        });
      }
    },

    // 重置密码
    resetPasswordClick(item) {
      this.$confirm("您确定要重置 该条数据密码吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: 'warning',
        lockScroll: false
      })
        .then(() => {
          server.haiheiResetUserPwdServer({ username: item.username,password:'000000'}).then(res => {
            if (res.success) {
              this.$message({
                type: "success",
                message: res.msg
              });
            } else {
              this.$message({
                type: "error",
                message: res.msg
              });
            }
          });
        })
        .catch(() => { });
    },

    //修改弹框
    editHandleClick(item) {
      this.isAdd = false;
      this.roleDialog = true;
      this.isSearch = false;
      this.title = '编辑';
      console.log(item)
      this.user_dialog = {
        id: item.id,
        name: item.name,
        username: item.username,
        phonenum: item.phonenum,
        password: item.password,
        sex: item.sex+'',
        state: item.state+''
      };
    },
    // 删除
    deleteHandleClick(item, index) {
      this.$confirm("您确定删除该条数据?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: 'warning',
        lockScroll: false
      })
        .then(() => {
          this.removeRolesItem(item, index);
        })
        .catch(() => { });
    },
    pageFunNumber(page) {
      //this.queryUserList(page);
    },
    //删除
    async removeRolesItem(item, index) {
      let res = await server.haiheiDeleteUserServer({ username: item.username });
      if (res.success) {
        this.queryUserList(this.page);
        this.$message({
          type: "success",
          message: res.msg
        });
        this.roleDialog = false;
      } else {
        this.$message({
          type: "error",
          message: res.msg
        });
      }
    },
    async queryUserList(page = 1) {
      let params = {
        page: page,
        pageSize: this.pageSize
      };
      console.log(params);
      this.loading = true;
      let res = await server.haiheiServerUserList(params);
      if (res.success) {
        this.tableData = res.result.pageList;
        this.total = res.result.nums;
        this.page = res.result.page;
        this.pageSize = res.result.pageSize;
        this.loading = false;
      } else {
        this.$message({
          type: "error",
          message: res.msg
        });
        this.loading = false;
        return;
      }
    },

  },
  components: {
    addDiglog,
    pagePagination,
    commonContainer
  }
};
</script>

